<template>
  <div class="zhujiaobody">
    <div class="btnbox">
      <div class="backbtn" @click="backlink()">
        <van-icon name="arrow-left" class="svgicon" />
      </div>
      <div style="display: flex; align-items: center">
        <div class="share">
          <icon-svg
            icon-class="share"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
        <div class="share" v-if="!iscollect" @click="setmycollect">
          <icon-svg
            icon-class="club_collect_white"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
        <div class="share" v-if="iscollect" @click="setmycollect">
          <icon-svg
            icon-class="club_collect_yellow"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
      </div>
    </div>
    <van-swipe
      :autoplay="3000"
      lazy-render
      class="swipebox"
      v-if="zhujiaoinfo.image_list != null"
    >
      <van-swipe-item
        v-for="(image, index) in zhujiaoinfo.image_list"
        :key="index"
      >
        <img
          v-lazy="image"
          class="swipeimg"
          @click="showpics(zhujiaoinfo.image_list, index)"
        />
      </van-swipe-item>
    </van-swipe>
    <div v-else class="imgbox">
      <img
        v-lazy="zhujiaoinfo.photo"
        @click="showpic(zhujiaoinfo.photo)"
        alt=""
      />
    </div>
    <el-card class="zhujiaoinfocard" :body-style="{ padding: '10px' }">
      <div class="zhujiaoavatarbox">
        <img
          v-lazy="zhujiaoinfo.photo"
          @click="showpic(zhujiaoinfo.photo)"
          alt=""
          class="zhujiaoavatar"
        />
      </div>
      <div class="zhujiaoinfobox">
        <div style="display: flex; justify-content: space-between">
          <div class="nickname">{{ zhujiaoinfo.nickname }}</div>
          <div class="price">￥{{ zhujiaoinfo.zhujiao_price }}/小时</div>
        </div>
        <div class="level">{{ zhujiaoinfo.level }}</div>
        <div style="display: flex; justify-content: space-between">
          <van-text-ellipsis
            rows="1"
            class="description"
            :content="'简介：' + zhujiaoinfo.introduction"
            expand-text="展开"
            collapse-text="收起"
          />
          <div class="zhujiaoaixin">
            <van-icon name="like-o" />
          </div>
        </div>
      </div>
    </el-card>
    <div class="containercard">
      <div class="dongtaititle">
        <div style="font-size: 18px; font-weight: 600">动态</div>
        <div style="font-size: 16px; line-height: 25px; color: gray">
          更多<van-icon name="arrow" />
        </div>
      </div>
      <div class="dongtaibox" v-if="zhujiaoinfo.dontaiinfo !== undefined">
        <div class="dongtaidate">
          <div style="font-size: 20px">29</div>
          <div style="font-size: 15px">/01</div>
        </div>

        <div class="dongtaicentent">
          <van-text-ellipsis
            rows="3"
            class="dongtaicontent"
            :content="zhujiaoinfo.dongtaiinfo"
            expand-text="展开"
            collapse-text="收起"
          />
        </div>
      </div>
      <div class="dongtaibox1" v-else>暂无动态</div>
      <div class="dongtaititle">
        <div style="font-size: 18px; font-weight: 600">服务评价</div>
        <div style="font-size: 16px; line-height: 25px; color: gray">
          全部评价<van-icon name="arrow" />
        </div>
      </div>
      <div class="pingjiabox"></div>
    </div>
    <van-cell class="inclub" title="TA所在的球房" is-link />
    <van-cell class="inclub" title="给教练打赏" @click="dashang">
      <template #right-icon>
        <icon-svg
          icon-class="zhujiao_dashang"
          icon-color="#304056"
          class="dashang-icon"
        ></icon-svg>
      </template>
    </van-cell>
    <div class="btnbox2">
      <van-button type="primary" plain round class="chatbtn">聊天</van-button>
      <van-button type="primary" round class="yuyuebtn" @click="gotoyuyue"
        >预约</van-button
      >
    </div>
  </div>
</template>

<script>
import { showToast, showImagePreview } from "vant";
import { getfavzhujiao, setfavzhujiao, getstoreinfo } from "@/http/request.js";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      zhujiaoinfo: {},
      iscollect: false,
    };
  },
  methods: {
    gotoyuyue() {
      this.$router.push({
        name: "ZhujiaoReserve",
        params: {
          zhujiaoinfo: JSON.stringify(this.zhujiaoinfo),
        },
      });
    },
    dashang() {
      this.$router.push({
        name: "ZhujiaoReward",
        params: {
          zhujiaoinfo: JSON.stringify(this.zhujiaoinfo),
        },
      });
    },
    backlink() {
      this.$router.back();
    },
    showpic(img) {
      showImagePreview([img]);
    },
    showpics(images, index) {
      showImagePreview({
        images: images,
        startPosition: index,
      });
    },
    setmycollect() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      const data = {
        user_id: userinfo.id,
        store_id: this.zhujiaoinfo.store_id,
        zhujiao_id: this.zhujiaoinfo.zhujiao_id,
        is_collect: this.iscollect,
      };
      setfavzhujiao(data).then((res) => {
        showToast(res.msg);
        this.iscollect = !this.iscollect;
      });
    },
    initshoucang() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      getfavzhujiao({ user_id: userinfo.id }).then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (this.zhujiaoinfo.zhujiao_id == res.data[i].zhujiao_id) {
            this.iscollect = true;
          }
        }
      });
    },
    initzhujiao(info) {
      getstoreinfo({ store_id: info.store_id }).then((res) => {
        if (res.code == 0) {
          info.business_hours = res.data.business_hours;
          info.store_name = res.data.store_name;
        }
      });
    },
  },
  mounted() {
    this.initshoucang();
  },
  created() {
    this.zhujiaoinfo = JSON.parse(this.$route.params.zhujiaoinfo);
    this.initzhujiao(this.zhujiaoinfo);
  },
};
</script>

<style scoped>
.zhujiaobody {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  padding-bottom: 130px;
  background-color: #f2f3f5;
}
.btnbox {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; /* 将 z-index 调整为 2，确保在上面一层 */
  position: relative; /* 添加 position: relative，以便子元素使用 z-index */
}
.backbtn {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  padding: 5px;
  margin-left: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}
.share {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  margin-left: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.svgicon {
  font-size: 30px;
  color: white;
}
.share-icon {
  width: 25px;
  height: 25px;
}
.swipebox {
  margin-top: -60px;
  height: 300px;
  z-index: 1 !important;
}

.swipeimg {
  width: 100%;
  height: auto;
  position: relative;
}
.imgbox {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top: -60px;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zhujiaoinfocard {
  width: 100%;
  margin-top: -25px;
  min-height: 150px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: rgb(255, 255, 255);
  overflow: visible;
  position: relative;
  z-index: 3;
}
.zhujiaoavatarbox {
  width: 100px;
  height: 100px;
  margin-top: -60px;
  margin-left: 15px;
  border-radius: 50%;
  overflow: hidden;
}
.zhujiaoavatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.zhujiaoinfobox {
  width: 85%;
  margin: 10px auto 0 auto;
  display: flex;
  flex-direction: column;
}
.nickname {
  font-size: 20px;
  font-weight: 600;
}
.price {
  font-size: 21px;
  font-weight: 600;
  color: #5e94fd;
}
.level {
  line-height: 25px;
  font-size: 18px;
}
.description {
  line-height: 25px;
  font-size: 17px;
  width: 85%;
}
.zhujiaoaixin {
  font-size: 17px;
  line-height: 25px;
}
.containercard {
  width: 100%;
  background-color: white;
  margin-top: 10px;
  padding-bottom: 10px;
}
.dongtaititle {
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 25px;
  margin: 10px auto;
  padding-top: 10px;
}
.dongtaibox {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f2f3f5;
}
.dongtaibox1 {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f2f3f5;
  text-align: center;
  font-size: 16px;
}
.dongtaidate {
  display: flex;
  align-items: flex-end;
  height: 25px;
  margin-top: 5px;
}
.dongtaicontent {
  width: 90%;
  margin: 0 auto;
  font-size: 18px;
  white-space: normal; /* 允许内容根据需要换行 */
  overflow-wrap: break-word; /* 在必要时断字 */
  word-break: keep-all; /* 在中英文混合时，尽量避免在中文字符间断行 */
}
.inclub {
  margin-top: 10px;
}
.dashang-icon {
  width: 25px;
  height: 25px;
}
.btnbox2 {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  padding: 10px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
}

.chatbtn,
.yuyuebtn {
  height: 40px;
}

.chatbtn {
  width: calc(40% - 10px);
}

.yuyuebtn {
  width: calc(60% - 10px);
}

.pingjiabox {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f2f3f5;
}
</style>
<style>
.inclub .van-cell__title {
  font-size: 18px !important;
  font-weight: 600 !important;
}
</style>